@page "/Button"

@using FluentUI.Demo.Shared.Pages.Button.Examples

<h1>Button</h1>

<p>
    As defined by the <a href="https://www.w3.org/WAI/ARIA/apg/patterns/button/" target="_blank" rel="noopener noreferrer">W3C</a>:
</p>
<blockquote>
    <p>
        A button is a widget that enables users to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.
    </p>
</blockquote>
<p>
    <code>&lt;FluentButton&gt;</code> wraps the <code>&lt;fluent-button&gt;</code> element, a web component implementation of an <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button" target="_blank" rel="noopener noreferrer">HTML button element</a> leveraging the Fluent UI design system. The <code>&lt;FluentButton&gt;</code> component supports several visual appearances (accent, lightweight, neutral, outline, stealth).
</p>

<h2 id="example">Examples</h2>

<DemoSection Title="Simple button examples" Component="@typeof(ButtonDefault)">
    <Description>
        Although it is possible to use Appearance.Hypertext on a button, this still renders a button due to a change in the underlying web component. 
        We will remove this specific appearance value in a future version.
    </Description>
</DemoSection>

<DemoSection Title="With content and icon" Component="@typeof(ButtonIcon)"></DemoSection>

<DemoSection Title="With aria-label" Component="@typeof(ButtonOthers)"></DemoSection>

<h2 id="documentation">Documentation</h2>

<ApiDocumentation Component="typeof(FluentButton)" />

